<template>
    <transition name="el-fade-in">
        <div v-if="flag">
            <!-- 遮罩层 -->
            <div class="lse_im_mask" @click="close"></div>
            <!-- 内容 -->
            <div class="lse_im_user_home" >
                <el-collapse v-model="selected" style="padding:10px">
                    <el-collapse-item title="接口名称" name="1">
                        <el-input v-model="apiInfo.name" size="mini" maxlength="50" show-word-limit></el-input>
                    </el-collapse-item>
                    <el-collapse-item title="HTTP URL" name="2">
                        <el-input v-model="apiInfo.url" size="mini" maxlength="500" show-word-limit></el-input>
                    </el-collapse-item>
                    <el-collapse-item title="Method" name="3">
                        <Select v-model="apiInfo.method" :value="apiInfo.method">
                            <Option v-for="(item, i) in elOptions"
                            :key="i"
                            :value="item.value">
                            {{item.label}}
                            </Option>
                        </Select>
                    </el-collapse-item>
                    <el-collapse-item title="Param" name="4">
                        <div style="text-align:right">
                            <el-button size="mini" icon="el-icon-plus" @click="publicDialog.flag = true;
                            publicDialog.title = '添加参数';publicDialog.type = 'addParam'">
                            </el-button>
                        </div>
                        <el-table
                            :data="params" size="mini"
                            border
                            style="width: 100%;margin-top:10px">
                            <el-table-column type="expand">
                            <template slot-scope="param">
                                <el-form label-position="top" inline class="demo-table-expand">
                                <el-form-item label="参数名称" style="width:100%">
                                    <el-input v-model="param.row.paramName" size="mini" maxlength="20" show-word-limit></el-input>
                                </el-form-item>
                                <el-form-item label="参数类型" style="width:100%">
                                    <el-input v-model="param.row.paramType" size="mini" maxlength="10" show-word-limit></el-input>
                                </el-form-item>
                                <el-form-item label="是否必须" style="width:100%">
                                    <Select v-model="param.row.isMust" :value="param.row.isMust">
                                        <Option :value="1">是</Option>
                                        <Option :value="0">否</Option>
                                    </Select>
                                </el-form-item>
                                <el-form-item label="参数备注" style="width:100%">
                                    <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 5}"
                                        maxlength="4000" show-word-limit
                                        v-model="param.row.paramNote">
                                        </el-input>
                                </el-form-item>
                                </el-form>
                                <div style="text-align:right">
                                    <el-button size="mini" @click="updateParam(param.row)">修改</el-button>
                                </div>
                            </template>
                            </el-table-column>
                            <el-table-column
                            prop="paramName"
                            width="200"
                            label="参数名称">
                            </el-table-column>
                            <el-table-column
                            prop="paramType"
                            label="参数类型">
                            </el-table-column>
                            <el-table-column
                            prop="isMust"
                            label="是否必须">
                            </el-table-column>
                            <el-table-column
                            prop="paramNote"
                            width="250"
                            label="参数备注">
                            </el-table-column>
                            <el-table-column
                                label="操作"
                                width="50">
                                <template slot-scope="scope">
                                    <el-button type="text" size="small" @click.native.prevent="deleteParam(scope.$index, scope.row)">删除</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </el-collapse-item>
                    <el-collapse-item title="Success" name="5">
                        <div style="text-align:right;margin-bottom:10px">
                          <el-button @click="dataView(apiInfo.success)" size="mini">show</el-button>
                        </div>
                        <el-input
                            type="textarea"
                            :autosize="{ minRows: 5}"
                            maxlength="4000" show-word-limit
                            v-model="apiInfo.success">
                            </el-input>
                    </el-collapse-item>
                    <el-collapse-item title="Failure" name="6">
                      <div style="text-align:right;margin-bottom:10px">
                        <el-button @click="dataView(apiInfo.success)" size="mini">show</el-button>
                      </div>
                        <el-input
                            type="textarea"
                            maxlength="4000" show-word-limit
                            :autosize="{ minRows: 5}"
                            v-model="apiInfo.failure">
                            </el-input>
                    </el-collapse-item>
                    <el-collapse-item title="备注" name="7">
                        <el-input
                            type="textarea"
                            :rows="3"
                            maxlength="800" show-word-limit
                            v-model="apiInfo.note">
                            </el-input>
                    </el-collapse-item>
                    <el-collapse-item title="其他信息" name="8">
                        <div>创建者: {{apiInfo.apiCreateName}}</div>
                        <div>创建日期: <Time :time="apiInfo.createTime"/></div>
                        <div>最后一次修改者: {{apiInfo.apiUpdateName || '暂无'}}</div>
                        <div>最后一次修改日期: {{timestampToTime(apiInfo.updateTime)}}</div>
                    </el-collapse-item>
                    </el-collapse>
                    <!-- 功能操作区 -->
                    <div style="margin: 20px 0;text-align:right">
                        <el-button  style="margin-top:10px"  size="mini" @click="openInterfaceOnLine">
                          <Icon type="md-bug" />
                  <span class="tips">打开调试</span>
                        </el-button>
                        <el-button  style="margin-top:10px"  size="mini" icon="el-icon-edit" @click="updateApi">
                  <span class="tips">确认修改</span>
                        </el-button>
                        <el-button size="mini" icon="el-icon-close" style="margin-top:10px" @click="deleteProjectApi">
                  <span class="tips">删除</span>
                        </el-button>
                    </div>
            </div>
            <!-- 附加组件 -->
            <!-- 弹窗 -->
            <transition name="el-fade-in">
                <div v-show="publicDialog.flag">
                    <div class="lse_api_modal_mask" @click="publicDialog.flag = false"></div>
                    <div class="lse_api_modal">
                        <div style="text-align:right" >
                        <i class="el-icon-close" @click="publicDialog.flag = false"></i>
                        </div>
                        <div style="text-align:center">
                            <b>{{publicDialog.title}}</b>
                        </div>
                        <!-- 内容 -->
                        <div>
                            <div v-if="publicDialog.type === 'addParam'">
                                <el-form label-position="top">
                                <el-form-item label="参数名称" style="width:100%">
                                    <el-input v-model="param.paramName" size="mini" maxlength="20" show-word-limit></el-input>
                                </el-form-item>
                                <el-form-item label="参数类型【默认String】" style="width:100%">
                                    <el-input v-model="param.paramType" size="mini" maxlength="10" show-word-limit></el-input>
                                </el-form-item>
                                <el-form-item label="是否必须" style="width:100%">
                                    <Select v-model="param.isMust" :value="param.isMust">
                                        <Option :value="1">是</Option>
                                        <Option :value="0">否</Option>
                                    </Select>
                                </el-form-item>
                                <el-form-item label="参数备注" style="width:100%">
                                    <el-input
                                        type="textarea"
                                        :autosize="{ minRows: 5}"
                                        maxlength="4000" show-word-limit
                                        v-model="param.paramNote">
                                        </el-input>
                                </el-form-item>
                                </el-form>
                                <div style="text-align:right">
                                    <el-button size="mini" @click="addApiParam">提交</el-button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </transition>
        </div>
    </transition>
</template>

<script>
import alert from '../util/alert'
// 1.2 新增数据展示页面
import DATAVIEW from '../util/data_view'
export default {
  name: 'API',
  data () {
    return {
      flag: false,
      apiInfo: Object,
      params: Array,
      methods: Array,
      selected: ['1', '2', '3', '4', '8'],
      publicDialog: {
        flag: false,
        title: '',
        type: ''
      },
      param: {
        isMust: 1,
        paramType: 'String'
      },
      elOptions: [{
        value: 'unlimited',
        label: '无限制'
      }, {
        value: 'GET',
        label: 'GET'
      }, {
        value: 'POST',
        label: 'POST'
      }, {
        value: 'PUT',
        label: 'PUT'
      }, {
        value: 'PATCH',
        label: 'PATCH'
      }, {
        value: 'DELETE',
        label: 'DELETE'
      }, {
        value: 'COPY',
        label: 'COPY'
      }, {
        value: 'HEAD',
        label: 'HEAD'
      }, {
        value: 'OPTIONS',
        label: 'OPTIONS'
      }, {
        value: 'LINK',
        label: 'LINK'
      }, {
        value: 'UNLINK',
        label: 'UNLINK'
      }, {
        value: 'PURGE',
        label: 'PURGE'
      }, {
        value: 'LOCK',
        label: 'LOCK'
      }, {
        value: 'UNLOCK',
        label: 'UNLOCK'
      }, {
        value: 'PROPFIND',
        label: 'PROPFIND'
      }, {
        value: 'VIEW',
        label: 'VIEW'
      }]
    }
  },
  methods: {
    close () {
      this.flag = false
    },
    timestampToTime (timestamp) {
      if (timestamp === null || timestamp === undefined) {
        return '暂无'
      }
      // 时间戳为10位需*1000，时间戳为13位的话不需乘1000
      let date = new Date(timestamp)
      let Y = date.getFullYear() + '-'
      let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-'
      let D = date.getDate() + ' '
      let h = date.getHours() + ':'
      let m = date.getMinutes() + ':'
      let s = date.getSeconds()
      return Y + M + D + h + m + s
    },
    // 修改参数
    updateParam (param) {
      let loading = this.lseutil.loading('正在修改')
      param.createTime = undefined
      this.lseajax.post(this.lseajax.baseurl + '/api/project/updateApiParam', param).then((data) => {
        if (data.code === 200) {
          this.lseutil.msg({
            msg: data.msg
          })
          this.getProjectApiParamList()
        } else {
          this.lseutil.msg({
            msg: data.msg
          })
        }
        loading.close()
      }).catch(res => {
        loading.close()
      })
    },
    // 删除参数
    deleteParam (index, row) {
      let that = this
      alert.install({
        titleCenter: true,
        title: '删除参数',
        msg: '确认删除此参数?此操作不可逆',
        confirm: function () {
          let loading = this.lseutil.loading('正在清除')
          this.lseajax.post(this.lseajax.baseurl + '/api/project/deleteApiParam', {
            param: row.id
          }).then((data) => {
            if (data.code === 200) {
              this.lseutil.msg({
                msg: data.msg
              })
              that.getProjectApiParamList()
            } else {
              this.lseutil.msg({
                msg: data.msg
              })
            }
            loading.close()
          }).catch(res => {
            loading.close()
          })
        }
      })
    },
    // 添加参数
    addApiParam () {
      let loading = this.lseutil.loading('正在添加')
      this.param.apiId = this.apiInfo.id
      this.param.projectId = this.apiInfo.projectId
      this.lseajax.post(this.lseajax.baseurl + '/api/project/addApiParam', this.param).then((data) => {
        if (data.code === 200) {
          this.lseutil.msg({
            msg: data.msg
          })
          this.publicDialog.flag = false
          this.getProjectApiParamList()
        } else {
          this.lseutil.msg({
            msg: data.msg
          })
        }
        loading.close()
      }).catch(res => {
        loading.close()
      })
    },
    // 修改API
    updateApi () {
      let loading = this.lseutil.loading('正在修改')
      this.lseajax.post(this.lseajax.baseurl + '/api/project/updateProjectApi', {
        projectId: this.apiInfo.projectId,
        url: this.apiInfo.url,
        name: this.apiInfo.name,
        method: this.apiInfo.method,
        success: this.apiInfo.success,
        failure: this.apiInfo.failure,
        note: this.apiInfo.note,
        id: this.apiInfo.id
      }).then((data) => {
        if (data.code === 200) {
          this.lseutil.msg({
            msg: data.msg
          })
          // if (this.methods[0] !== undefined) {
          //   this.methods[0]()
          // }
        } else {
          this.lseutil.msg({
            msg: data.msg
          })
        }
        loading.close()
      }).catch(res => {
        loading.close()
      })
    },
    // 读取接口参数
    getProjectApiParamList () {
      let loading = this.lseutil.loading('正在读取接口详情')
      this.lseajax.post(this.lseajax.baseurl + '/api/project/getProjectApiParamList', {
        api: this.apiInfo.id,
        project: this.apiInfo.projectId
      }).then((data) => {
        if (data.code === 200) {
          this.params = data.data
        } else {
          this.lseutil.msg({
            msg: data.msg
          })
        }
        loading.close()
      }).catch(res => {
        loading.close()
      })
    },
    // 删除接口
    deleteProjectApi () {
      let apiInfo = this.apiInfo
      let that = this
      alert.install({
        titleCenter: true,
        title: '删除接口',
        msg: '确认删除此接口?此操作不可逆',
        confirm: function () {
          let loading = this.lseutil.loading('正在清除')
          this.lseajax.post(this.lseajax.baseurl + '/api/project/deleteProjectApi', {
            api: apiInfo.id
          }).then((data) => {
            if (data.code === 200) {
              this.lseutil.msg({
                msg: data.msg
              })
              if (that.methods[0] !== undefined) {
                that.methods[0]()
              }
              that.close()
            } else {
              this.lseutil.msg({
                msg: data.msg
              })
            }
            loading.close()
          }).catch(res => {
            loading.close()
          })
        }
      })
    },
    // 打开在线调试
    openInterfaceOnLine () {
      this.close()
      if (this.methods[1] !== undefined) {
        this.methods[1]()
      }
    },
    dataView (data) {
      DATAVIEW.show({
        data: data
      })
    }
  },
  created () {
  }
}
</script>

<style scoped>
.lse_im_mask{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background:rgba(0, 0, 0, 0.5);
    z-index: 9999;
}
.lse_im_user_home{
    height: 80%;
    width: 80%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
    background: white;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    z-index: 10000;
    border-radius: 5px;
    padding: 10px;
}
.lse_api_modal_mask{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background:rgba(0, 0, 0, 0.5);
    z-index: 10001;
}
.lse_api_modal{
    height: 70%;
    width: 70%;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    overflow: auto;
    background: white;
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
    z-index: 10002;
    border-radius: 5px;
    padding: 10px;
}
>>>.el-avatar img{
  margin: auto
}
</style>
